JavaScriptããªãã£ã«ã®äžçãæ¢æ±ïŒãã®ç®çãçè§£ããéçºæè¡ãåŠã³ããŠã§ãã¢ããªã±ãŒã·ã§ã³ã®ã¯ãã¹ãã©ãŠã¶ã»ã¯ãã¹ãã©ãããã©ãŒã äºææ§ãã°ããŒãã«ã«ç¢ºä¿ããŸãã
ãŠã§ããã©ãããã©ãŒã ã®äºææ§ïŒJavaScriptããªãã£ã«éçºã®å æ¬çã¬ã€ã
çµ¶ããé²åãããŠã§ãéçºã®äžçã«ãããŠãã¯ãã¹ãã©ãŠã¶ããã³ã¯ãã¹ãã©ãããã©ãŒã ã®äºææ§ã確ä¿ããããšã¯æãéèŠã§ããã¢ãã³ãã©ãŠã¶ã¯ãŠã§ãæšæºãžã®æºæ ã«åªããŠããŸãããå€ããã©ãŠã¶ãæ©èœã®å£ããã©ãŠã¶ã§ã¯ç¹å®ã®JavaScriptæ©èœããµããŒããããŠããªãå ŽåããããŸããããã§JavaScriptããªãã£ã«ãç»å ŽããŸããããã¯ãã¢ãã³ãªã³ãŒããå¹ åºãç°å¢ã§ã·ãŒã ã¬ã¹ã«å®è¡ã§ããããã«ããéèŠãªæ¶ãæ©ãšããŠæ©èœããŸãããã®ã¬ã€ãã§ã¯ãããªãã£ã«éçºã®è€éããæãäžããå ç¢ã§ã°ããŒãã«ã«äºææ§ã®ãããŠã§ãã¢ããªã±ãŒã·ã§ã³ãäœæããããã®ç¥èãšæè¡ãæäŸããŸãã
JavaScriptããªãã£ã«ãšã¯äœãïŒ
ããªãã£ã«ãšã¯ããã©ãŠã¶ããã€ãã£ãã«ãµããŒãããŠããªãæ©èœãæäŸããã³ãŒãïŒéåžžã¯JavaScriptïŒã®äžéšã§ããæ¬è³ªçã«ãããã¯æ¢åã®æè¡ã䜿çšããŠäžè¶³ããŠããæ©èœãå®è£ ããããšã§ãééãåãããã³ãŒãã¹ããããã§ãããããªãã£ã«ããšããçšèªã¯ã穎ãåãã補åïŒPolyfillaãªã©ïŒããåçšãããŠããŸãããŠã§ãéçºã«ãããŠãããªãã£ã«ã¯å€ããã©ãŠã¶ã®äžè¶³ããŠããæ©èœã«å¯ŸåŠããéçºè ãå€ãã·ã¹ãã ã®ãŠãŒã¶ãŒãçå€ããããšãªãæ°ããæ©èœã䜿çšã§ããããã«ããŸãã
ãã®ããã«èããŠã¿ãŠãã ãããããªãã¯ãŠã§ããµã€ãã§æ°ããçŽ æŽãããJavaScriptã®æ©èœã䜿ããããšæã£ãŠããŸãããäžéšã®ãŠãŒã¶ãŒã¯ãŸã ãã®æ©èœããµããŒãããŠããªãå€ããã©ãŠã¶ã䜿çšããŠããŸããããªãã£ã«ã¯ãå€ããã©ãŠã¶ãæ°ããã³ãŒããçè§£ãå®è¡ã§ããããã«ãã翻蚳è ã®ãããªãã®ã§ããã©ãŠã¶ã®éžæã«é¢ä¿ãªãããã¹ãŠã®ãŠãŒã¶ãŒã«äžè²«ããäœéšãä¿èšŒããŸãã
ããªãã£ã« vs. ã·ã
ãããªãã£ã«ããšãã·ã ããšããçšèªã¯ãã°ãã°åãæå³ã§äœ¿ãããŸããã埮åŠãªéãããããŸããäž¡æ¹ãšãäºææ§ã®åé¡ã«å¯ŸåŠããŸãããããªãã£ã«ã¯ç¹ã«äžè¶³ããŠããæ©èœã®æ£ç¢ºãªåäœãåçŸããããšãç®æãã®ã«å¯Ÿããã·ã ã¯äžè¬çã«ãããåºç¯ãªäºææ§ã®åé¡ã«å¯Ÿããåé¿çãä»£æ¿ææ®µãæäŸããŸããããªãã£ã«ã¯ã·ã ã®äžçš®ã§ããããã¹ãŠã®ã·ã ãããªãã£ã«ã§ããããã§ã¯ãããŸããã
äŸãã°ãArray.prototype.forEachã¡ãœããã®ããªãã£ã«ã¯ãECMAScript仿§ã§å®çŸ©ãããŠããéãã®æ£ç¢ºãªæ©èœãå®è£
ããŸããäžæ¹ãã·ã ã¯ãforEachã®åäœãå®å
šã«åçŸããŠããªããŠããé
åã®ãããªãªããžã§ã¯ããå埩åŠçããããã®ããäžè¬çãªè§£æ±ºçãæäŸãããããããŸããã
ãªãããªãã£ã«ã䜿çšããã®ãïŒ
ããªãã£ã«ã䜿çšããããšã«ã¯ãããã€ãã®éèŠãªå©ç¹ããããŸãïŒ
- ãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã®åäžïŒ ãã©ãŠã¶ã«é¢ä¿ãªãããã¹ãŠã®ãŠãŒã¶ãŒã«äžè²«ããæ©èœçãªäœéšãä¿èšŒããŸãããŠãŒã¶ãŒã¯ããã©ãŠã¶ãææ°ã¢ãã«ã§ãªããŠããå®å šãªæ©èœã䜿çšã§ããŸãã
- ã¢ãã³ãªã³ãŒãã®äœ¿çšïŒ éçºè ã¯äºææ§ãç ç²ã«ããããšãªããææ°ã®JavaScriptæ©èœãšAPIãæŽ»çšã§ããŸãã察å¿ãã©ãŠã¶ã®æå°å ¬åæ¯ã«åãããŠã³ãŒããæžãå¿ èŠã¯ãããŸããã
- å°æ¥æ§ãžã®åãïŒ å€ããã©ãŠã¶ã§ãæ©èœããããšã確信ããªãããã¢ããªã±ãŒã·ã§ã³ã段éçã«åŒ·åããããšãã§ããŸãã
- éçºã³ã¹ãã®åæžïŒ ç°ãªããã©ãŠã¶çšã«å¥ã ã®ã³ãŒããã¹ãæžãå¿ èŠããªããªããéçºãšä¿å®ãç°¡çŽ åãããŸãããã¹ãŠã®ãŠãŒã¶ãŒã«å¯ŸããŠäžã€ã®ã³ãŒãããŒã¹ã§æžã¿ãŸãã
- ã³ãŒãä¿å®æ§ã®åäžïŒ ã¢ãã³ãªJavaScriptæ§æã䜿çšããããšã§ãããã¯ãªãŒã³ã§ä¿å®ããããã³ãŒããä¿é²ããŸãã
æ©èœæ€åºïŒããªãã£ã«ã®åºç€
ããªãã£ã«ãé©çšããåã«ããã©ãŠã¶ãå®éã«ãããå¿ èŠãšããŠãããã©ããã倿ããããšãéèŠã§ããããã§æ©èœæ€åºãç»å ŽããŸããæ©èœæ€åºãšã¯ãç¹å®ã®æ©èœãAPIããã©ãŠã¶ã§ãµããŒããããŠãããã©ããã確èªããããšã§ãããµããŒããããŠããªãå Žåã¯ããªãã£ã«ãé©çšãããããã§ãªãå Žåã¯ãã©ãŠã¶ã®ãã€ãã£ãå®è£ ã䜿çšãããŸãã
æ©èœæ€åºã®å®è£ æ¹æ³
æ©èœæ€åºã¯éåžžãæ¡ä»¶æãštypeofæŒç®åã䜿çšããããã°ããŒãã«ãªããžã§ã¯ãäžã®ããããã£ã®ååšã確èªããããšã§å®è£
ãããŸãã
äŸïŒArray.prototype.forEachã®æ€åº
Array.prototype.forEachã¡ãœããããµããŒããããŠãããã©ãããæ€åºããæ¹æ³ã¯æ¬¡ã®ãšããã§ãïŒ
if (!Array.prototype.forEach) {
// forEachã®ããªãã£ã«
Array.prototype.forEach = function(callback, thisArg) {
// ããªãã£ã«ã®å®è£
// ...
};
}
ãã®ã³ãŒãã¹ããããã¯ããŸãArray.prototype.forEachãååšãããã©ããã確èªããŸããååšããªãå Žåã¯ãããªãã£ã«ã®å®è£
ãæäŸãããŸããååšããå Žåã¯ããã©ãŠã¶ã®ãã€ãã£ãå®è£
ã䜿çšãããäžå¿
èŠãªãªãŒããŒããããåé¿ããŸãã
äŸïŒfetch APIã®æ€åº
if (!('fetch' in window)) {
// fetchã®ããªãã£ã«
// fetchããªãã£ã«ã©ã€ãã©ãªãã€ã³ã¯ã«ãŒãããïŒäŸïŒwhatwg-fetchïŒ
var script = document.createElement('script');
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/fetch/3.6.2/fetch.min.js';
document.head.appendChild(script);
}
ãã®äŸã§ã¯ãwindowãªããžã§ã¯ãå
ã«fetch APIãååšãããã©ããã確èªããŸããèŠã€ãããªãå Žåã¯ãfetchããªãã£ã«ã©ã€ãã©ãªãåçã«èªã¿èŸŒã¿ãŸãã
ç¬èªã®ããªãã£ã«ãéçºããïŒã¹ããããã€ã¹ãããã¬ã€ã
ç¬èªã®ããªãã£ã«ãäœæããããšã¯ãç¹å®ã®ããŒãºã«åãããŠãœãªã¥ãŒã·ã§ã³ã調æŽã§ãããããããããã®ããçµéšã«ãªããŸãã以äžã«ããªãã£ã«éçºã®ã¹ããããã€ã¹ãããã¬ã€ãã瀺ããŸãïŒ
ã¹ããã1ïŒäžè¶³ããŠããæ©èœãç¹å®ãã
æåã®ã¹ãããã¯ãããªãã£ã«ãããJavaScriptã®æ©èœãAPIãç¹å®ããããšã§ããECMAScript仿§ãä¿¡é Œã§ããããã¥ã¡ã³ãïŒMDN Web Docsãªã©ïŒãåç §ããŠãæ©èœã®åäœãæåŸ ãããå ¥åãšåºåãçè§£ããŸããããã«ãããæ§ç¯ããå¿ èŠããããã®ãæ£ç¢ºã«ææ¡ã§ããŸãã
ã¹ããã2ïŒæ¢åã®ããªãã£ã«ã調æ»ãã
ç¬èªã®ããªãã£ã«ãæžãå§ããåã«ãæ¢åã®ãœãªã¥ãŒã·ã§ã³ã調æ»ããã®ãè³¢æã§ãã察象ãšããŠããæ©èœã®ããªãã£ã«ã¯ãæ¢ã«èª°ããäœæããŠããå¯èœæ§ãé«ãã§ããæ¢åã®ããªãã£ã«ã調ã¹ãããšã§ãå®è£ æŠç¥ãæœåšçãªèª²é¡ã«é¢ãã貎éãªæŽå¯ãåŸãããšãã§ããŸããæ¢åã®ããªãã£ã«ãèªåã®ããŒãºã«åãããŠé©å¿ããããæ¡åŒµãããã§ãããããããŸããã
npmjs.comãpolyfill.ioãªã©ã®ãªãœãŒã¹ã¯ãæ¢åã®ããªãã£ã«ãæ€çŽ¢ããã®ã«æé©ãªå Žæã§ãã
ã¹ããã3ïŒããªãã£ã«ãå®è£ ãã
æ©èœã«ã€ããŠæç¢ºã«çè§£ããæ¢åã®ãœãªã¥ãŒã·ã§ã³ã調æ»ããããããªãã£ã«ãå®è£ ããæã§ããäžè¶³ããŠããæ©èœã®åäœãåçŸãã颿°ããªããžã§ã¯ããäœæããããšããå§ããŸããããªãã£ã«ãæåŸ ã©ããã«åäœããããšã確èªããããã«ãECMAScript仿§ã«çްå¿ã®æ³šæãæã£ãŠãã ãããã¯ãªãŒã³ã§ååã«ææžåãããŠããããšã確èªããŠãã ããã
äŸïŒString.prototype.startsWithã®ããªãã£ã«
以äžã¯ãString.prototype.startsWithã¡ãœãããããªãã£ã«ããæ¹æ³ã®äŸã§ãïŒ
if (!String.prototype.startsWith) {
String.prototype.startsWith = function(searchString, position) {
position = position || 0;
return this.substr(position, searchString.length) === searchString;
};
}
ãã®ããªãã£ã«ã¯ãstartsWithã¡ãœããããŸã ååšããªãå Žåã«String.prototypeã«è¿œå ããŸããsubstrã¡ãœããã䜿çšããŠãæååãæå®ãããsearchStringã§å§ãŸããã©ããã確èªããŸãã
ã¹ããã4ïŒåŸ¹åºçã«ãã¹ããã
ãã¹ãã¯ãããªãã£ã«éçºããã»ã¹ã®éèŠãªéšåã§ããå€ãããŒãžã§ã³ãç°ãªããã©ãããã©ãŒã ãå«ããããŸããŸãªãã©ãŠã¶ã§ããªãã£ã«ããã¹ãããŠãã ãããJestãMochaãªã©ã®èªåãã¹ããã¬ãŒã ã¯ãŒã¯ã䜿çšããŠãããªãã£ã«ãæ£ããåäœãããªã°ã¬ãã·ã§ã³ãåŒãèµ·ãããªãããšã確èªããŠãã ããã
以äžã®ãã©ãŠã¶ã§ããªãã£ã«ããã¹ãããããšãæ€èšããŠãã ããïŒ
- Internet Explorer 9-11ïŒã¬ã¬ã·ãŒãµããŒãçšïŒ
- ChromeãFirefoxãSafariãEdgeã®ææ°ããŒãžã§ã³
- iOSããã³Androidã®ã¢ãã€ã«ãã©ãŠã¶
ã¹ããã5ïŒããªãã£ã«ãææžåãã
æç¢ºã§ç°¡æœãªããã¥ã¡ã³ãã¯ãã©ããªããªãã£ã«ã«ãšã£ãŠãäžå¯æ¬ ã§ããããªãã£ã«ã®ç®çãäœ¿çšæ¹æ³ãããã³æ¢ç¥ã®å¶éãææžåããŠãã ãããããªãã£ã«ã®äœ¿ç𿹿³ã®äŸãæäŸããäŸåé¢ä¿ãåææ¡ä»¶ã説æããŠãã ãããããã¥ã¡ã³ããä»ã®éçºè ãç°¡åã«ã¢ã¯ã»ã¹ã§ããããã«ããŠãã ããã
ã¹ããã6ïŒããªãã£ã«ãé åžãã
ããªãã£ã«ãæ£ããåäœããååã«ææžåãããŠãããšç¢ºä¿¡ããããä»ã®éçºè ã«é åžã§ããŸããnpmã§ããªãã£ã«ãå ¬éããããã¹ã¿ã³ãã¢ãã³ã®JavaScriptãã¡ã€ã«ãšããŠæäŸãããããããšãæ€èšããŠãã ããããŸããpolyfill.ioã®ãããªãªãŒãã³ãœãŒã¹ãããžã§ã¯ãã«ããªãã£ã«ãè²¢ç®ããããšãã§ããŸãã
ããªãã£ã«ã©ã€ãã©ãªãšãµãŒãã¹
ç¬èªã®ããªãã£ã«ãäœæããããšã¯è²ŽéãªåŠç¿äœéšã«ãªããŸãããæ¢åã®ããªãã£ã«ã©ã€ãã©ãªããµãŒãã¹ã䜿çšããæ¹ãå¹ççãªå Žåãå€ãã§ãããããã®ãªãœãŒã¹ã¯ããããžã§ã¯ãã«ç°¡åã«çµ±åã§ããå¹ åºãæ¢è£œã®ããªãã£ã«ãæäŸããŸãã
polyfill.io
polyfill.ioã¯ããŠãŒã¶ãŒã®ãã©ãŠã¶ã«åºã¥ããŠã«ã¹ã¿ã ã®ããªãã£ã«ãã³ãã«ãæäŸãã人æ°ã®ãµãŒãã¹ã§ããHTMLã«scriptã¿ã°ãå«ããã ãã§ãpolyfill.ioãèªåçã«ãã©ãŠã¶ãæ€åºããå¿ èŠãªããªãã£ã«ã®ã¿ãé ä¿¡ããŸãã
äŸïŒpolyfill.ioã®äœ¿çš
ãã®scriptã¿ã°ã¯ããŠãŒã¶ãŒã®ãã©ãŠã¶ã§ES6æ©èœããµããŒãããããã«å¿
èŠãªãã¹ãŠã®ããªãã£ã«ãååŸããŸããfeaturesãã©ã¡ãŒã¿ãã«ã¹ã¿ãã€ãºããŠãå¿
èŠãªããªãã£ã«ãæå®ã§ããŸãã
Core-js
Core-jsã¯ãã¢ãžã¥ãŒã«åŒã®JavaScriptæšæºã©ã€ãã©ãªã§ããææ°ããŒãžã§ã³ãŸã§ã®ECMAScriptã®ããªãã£ã«ãæäŸããŸããBabelãä»ã®å€ãã®ãã©ã³ã¹ãã€ã©ã§äœ¿çšãããŠããŸãã
Modernizr
Modernizrã¯ããŠãŒã¶ãŒã®ãã©ãŠã¶ã§HTML5ããã³CSS3ã®æ©èœãæ€åºããã®ã«åœ¹ç«ã€JavaScriptã©ã€ãã©ãªã§ããããèªäœã¯ããªãã£ã«ãæäŸããŸããããæ©èœæ€åºã«åºã¥ããŠæ¡ä»¶ä»ãã§ããªãã£ã«ãé©çšããããã«ãããªãã£ã«ãšçµã¿åãããŠäœ¿çšã§ããŸãã
ããªãã£ã«éçºãšäœ¿çšã®ãã¹ããã©ã¯ãã£ã¹
æé©ãªããã©ãŒãã³ã¹ãšä¿å®æ§ã確ä¿ããããã«ãããªãã£ã«ãéçºããã³äœ¿çšããéã«ã¯ã以äžã®ãã¹ããã©ã¯ãã£ã¹ã«åŸã£ãŠãã ããïŒ
- æ©èœæ€åºã䜿çšããïŒ ããªãã£ã«ãäžå¿ èŠã«é©çšããªãããã«ãåžžã«æ©èœæ€åºã䜿çšããŠãã ããããã©ãŠã¶ãæ¢ã«æ©èœããµããŒãããŠããå Žåã«ããªãã£ã«ãé©çšãããšãããã©ãŒãã³ã¹ãäœäžããå¯èœæ§ããããŸãã
- ããªãã£ã«ãæ¡ä»¶ä»ãã§èªã¿èŸŒãïŒ ããªãã£ã«ã¯å¿ èŠãªå Žåã«ã®ã¿èªã¿èŸŒã¿ãŸããæ¡ä»¶ä»ãèªã¿èŸŒã¿æè¡ã䜿çšããŠãäžèŠãªãããã¯ãŒã¯ãªã¯ãšã¹ããé²ããŸãã
- ããªãã£ã«ãµãŒãã¹ã䜿çšããïŒ ãŠãŒã¶ãŒã®ãã©ãŠã¶ã«åºã¥ããŠå¿ èŠãªããªãã£ã«ãèªåçã«é ä¿¡ããããã«ãpolyfill.ioã®ãããªããªãã£ã«ãµãŒãã¹ã®äœ¿çšãæ€èšããŠãã ããã
- 培åºçã«ãã¹ãããïŒ ããŸããŸãªãã©ãŠã¶ããã©ãããã©ãŒã ã§ããªãã£ã«ããã¹ãããæ£ããåäœããããšã確èªããŠãã ããã
- ããªãã£ã«ãææ°ã®ç¶æ ã«ä¿ã€ïŒ ãã©ãŠã¶ãé²åããã«ã€ããŠãããªãã£ã«ã¯æä»£é ãã«ãªã£ãããæŽæ°ãå¿ èŠã«ãªã£ããããå ŽåããããŸããããªãã£ã«ã广çã§ããç¶ããããã«ãææ°ã®ç¶æ ã«ä¿ã£ãŠãã ããã
- ããªãã£ã«ãµã€ãºãæå°åããïŒ ããªãã£ã«ã¯JavaScriptã³ãŒãå šäœã®ãµã€ãºãå¢å ãããå¯èœæ§ããããŸããäžèŠãªã³ãŒããåé€ããå¹ççãªã¢ã«ãŽãªãºã ã䜿çšããããšã§ãããªãã£ã«ã®ãµã€ãºãæå°åããŠãã ããã
- ãã©ã³ã¹ãã€ã«ãæ€èšããïŒ å Žåã«ãã£ãŠã¯ããã©ã³ã¹ãã€ã«ïŒBabelãªã©ã®ããŒã«ã䜿çšïŒãããªãã£ã«ã®ããè¯ãä»£æ¿ææ®µãšãªãããšããããŸãããã©ã³ã¹ãã€ã«ã¯ãã¢ãã³ãªJavaScriptã³ãŒããå€ããã©ãŠã¶ãçè§£ã§ããå€ãããŒãžã§ã³ã«å€æããŸãã
ããªãã£ã«ãšãã©ã³ã¹ãã€ã©ïŒè£å®çãªã¢ãããŒã
ããªãã£ã«ãšãã©ã³ã¹ãã€ã©ã¯ãã¯ãã¹ãã©ãŠã¶äºææ§ãå®çŸããããã«ãã°ãã°äžç·ã«äœ¿çšãããŸãããã©ã³ã¹ãã€ã©ã¯ãã¢ãã³ãªJavaScriptã³ãŒããå€ããã©ãŠã¶ãçè§£ã§ããå€ãããŒãžã§ã³ã«å€æããŸããããªãã£ã«ã¯ãäžè¶³ããŠããæ©èœãAPIãæäŸããããšã§ééãåããŸãã
äŸãã°ãBabelã䜿çšããŠES6ã³ãŒããES5ã³ãŒãã«ãã©ã³ã¹ãã€ã«ãããã®åŸããªãã£ã«ã䜿çšããŠãå€ããã©ãŠã¶ã§ãµããŒããããŠããªãArray.fromãPromiseãªã©ã®æ©èœã®å®è£
ãæäŸããããšãã§ããŸãã
ãã®ãã©ã³ã¹ãã€ã«ãšããªãã£ã«ã®çµã¿åããã¯ãã¯ãã¹ãã©ãŠã¶äºææ§ã®ããã®å æ¬çãªãœãªã¥ãŒã·ã§ã³ãæäŸããææ°ã®JavaScriptæ©èœã䜿çšããªãããã³ãŒããå€ãç°å¢ã§ãã¹ã ãŒãºã«å®è¡ãããããšãä¿èšŒããŸãã
äžè¬çãªããªãã£ã«ã®ã·ããªãªãšäŸ
以äžã¯ãããªãã£ã«ãå¿ èŠãšãªãäžè¬çãªã·ããªãªãšãããããå®è£ ããæ¹æ³ã®äŸã§ãïŒ
1. Object.assignã®ããªãã£ã«
Object.assignã¯ã1ã€ä»¥äžã®ãœãŒã¹ãªããžã§ã¯ãããã¿ãŒã²ãããªããžã§ã¯ããžããã¹ãŠã®åæå¯èœãªèªèº«ã®ããããã£ã®å€ãã³ããŒããã¡ãœããã§ãããªããžã§ã¯ããããŒãžããããã«ãã䜿çšãããŸãã
if (typeof Object.assign != 'function') {
// writable: true, enumerable: false, configurable: true ã§ããå¿
èŠããããŸã
Object.defineProperty(Object, "assign", {
value: function assign(target, varArgs) {
'use strict';
if (target == null) {
throw new TypeError('Cannot convert undefined or null to object');
}
var to = Object(target);
for (var index = 1; index < arguments.length; index++) {
var nextSource = arguments[index];
if (nextSource != null) {
for (var nextKey in nextSource) {
// hasOwnPropertyãã·ã£ããŠã€ã³ã°ãããéã®ãã°ãåé¿
if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
to[nextKey] = nextSource[nextKey];
}
}
}
}
return to;
},
writable: true,
configurable: true
});
}
2. Promiseã®ããªãã£ã«
Promiseã¯ãéåææäœã®æçµçãªå®äºïŒãŸãã¯å€±æïŒã衚ãçµã¿èŸŒã¿ãªããžã§ã¯ãã§ãã
es6-promiseã®ãããªããªãã£ã«ã©ã€ãã©ãªã䜿çšããŠãå€ããã©ãŠã¶ã«Promiseå®è£
ãæäŸã§ããŸãïŒ
if (typeof Promise === 'undefined') {
// es6-promiseããªãã£ã«ãã€ã³ã¯ã«ãŒã
var script = document.createElement('script');
script.src = 'https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js';
document.head.appendChild(script);
}
3. ã«ã¹ã¿ã èŠçŽ ã®ããªãã£ã«
ã«ã¹ã¿ã èŠçŽ ã䜿çšãããšãã«ã¹ã¿ã ã®åäœãæã€ç¬èªã®HTMLèŠçŽ ãå®çŸ©ã§ããŸãã
@webcomponents/custom-elementsããªãã£ã«ã䜿çšããŠãå€ããã©ãŠã¶ã§ã«ã¹ã¿ã èŠçŽ ããµããŒãã§ããŸãïŒ
ããªãã£ã«ã®æªæ¥
ãã©ãŠã¶ãé²åãç¶ããæ°ãããŠã§ãæšæºãæ¡çšããã«ã€ããŠãããªãã£ã«ã®å¿ èŠæ§ã¯æéãšãšãã«æžå°ãããããããŸãããããããç¹ã«ã¬ã¬ã·ãŒãã©ãŠã¶ããµããŒãããå ŽåãããŸã åºããµããŒããããŠããªãæå ç«¯ã®æ©èœã䜿çšããå Žåãããªãã£ã«ã¯åœé¢ã®éããŠã§ãéçºè ã«ãšã£ãŠäŸ¡å€ã®ããããŒã«ã§ããç¶ããã§ãããã
ãŠã§ãæšæºã®çºå±ãšãšããŒã°ãªãŒã³ãã©ãŠã¶ïŒèªåçã«ææ°ããŒãžã§ã³ã«æŽæ°ããããã©ãŠã¶ïŒã®æ¡çšå¢å ã«ãããããªãã£ã«ãžã®äŸåã¯åŸã ã«æžå°ããŸãããããããã¹ãŠã®ãŠãŒã¶ãŒãã¢ãã³ãã©ãŠã¶ã䜿çšããããã«ãªããŸã§ãããªãã£ã«ã¯ã¯ãã¹ãã©ãŠã¶äºææ§ã確ä¿ããäžè²«ãããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãæäŸããããã«éèŠãªåœ¹å²ãæããç¶ããŸãã
çµè«
JavaScriptããªãã£ã«ã¯ããŠã§ãéçºã«ãããã¯ãã¹ãã©ãŠã¶ããã³ã¯ãã¹ãã©ãããã©ãŒã ã®äºææ§ã確ä¿ããããã«äžå¯æ¬ ã§ãããã®ç®çãéçºæè¡ããã¹ããã©ã¯ãã£ã¹ãçè§£ããããšã§ãå ç¢ã§ã°ããŒãã«ã«ã¢ã¯ã»ã¹å¯èœãªãŠã§ãã¢ããªã±ãŒã·ã§ã³ãäœæã§ããŸããç¬èªã®ããªãã£ã«ãéçºããããæ¢åã®ã©ã€ãã©ãªããµãŒãã¹ã䜿çšãããã«ããããããããªãã£ã«ã¯ããªãã®ãŠã§ãéçºããŒã«ãããã®äžã§äŸ¡å€ã®ããããŒã«ã§ããç¶ããŸãããŠã§ãæšæºãšãã©ãŠã¶ãµããŒãã®é²åããç¶æ³ã«ã€ããŠæ å ±ãåŸç¶ããããšã¯ãããªãã£ã«ããã€ãã©ã®ããã«å¹æçã«äœ¿çšãããã«ã€ããŠãæ å ±ã«åºã¥ããæ±ºå®ãäžãããã«éèŠã§ãããŠã§ããã©ãããã©ãŒã ã®äºææ§ã®è€éããä¹ãè¶ããéã«ã¯ãããªãã£ã«ããã¹ãŠã®ç°å¢ã§äžè²«ããåè¶ãããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãæäŸããäžã§ã®å³æ¹ã§ããããšãå¿ããªãã§ãã ãããããããåãå ¥ããç¿åŸããããªãã®ãŠã§ãã¢ããªã±ãŒã·ã§ã³ã倿§ã§ãã€ãããã¯ãªã€ã³ã¿ãŒãããã®äžçã§ç¹æ ããã®ãèŠãŠãã ããã